<template>
    <div class="goodsinfo-container">

        <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter">
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>

        <!-- 这是商品轮播图区域 --> 
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                        <!-- 3.使用我们的轮播图组件，我们所需要的图片数据需要进行父子组件的传值，一定要注意字母的大小写！！！-->
                        <swiper :lunbotuList="fatherLunbotuList" :isfull="true"></swiper>
                        <!-- <swiper :isfull="false"></swiper> -->
					</div>
				</div>
		</div> 
        
        <!-- 这是商品购买区域 -->
        <div class="mui-card">
			<div class="mui-card-header">{{goodsinfo.title}}</div>
			<div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        市场价：<del>¥{{goodsinfo.oldPrice}}</del>&nbsp;&nbsp;<span class="now_price">销售价：¥{{goodsinfo.newPrice}}</span>
                    </p>
                    <!-- 3 使用我们的计算盒子组件 -->
                    <p>购买数量：<numbox @getcount="getSelectCount" :max="67"></numbox></p>
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
                        <!-- 分析：如何实现加入购物车的时候，拿到选择框中的数字 -->
                        <!-- 1.按钮属于我们的 goodsinfo 组件页面，数字属于我们的 numbox 组件页面-->
                        <!-- 2.由于涉及到了父子组件的嵌套问题，所以无法直接在 goodsinfo 页面中取到 numbox 组件里面的值-->
                        <!-- 3.涉及到了子组件向父组件传值了（事件调用该机制）（注意不是父组件向子组件传值，这两个是不一样的）-->
                        <!-- 4.事件调用的本质，父组件向子组件传递方法，子组件调用这个方法，同时把数据当作参数，传递给这个方法 -->
                    </p>
                </div>
			</div>
		</div>


        <!-- 这是商品参数区域 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：</p>
                    <p>库存情况：{{goodsinfo.leftNum}} 件</p>
                    <p>上架时间：</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="goDesc(index)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="goComment(index)">商品评论</mt-button>
            </div>
        </div>
    </div> 
</template>


<script>
// 1.导入我们所需要的轮播组件
import swiper from '../subcomponents/swiper.vue';
// 1.导入我们所需要的计算盒子组件
import numbox from '../subcomponents/goodsinfo_numbox.vue';
export default {
    data(){
        return{
            index:this.$route.params.index, //将路由参数中的index值挂载到data中，方便后期调用
            fatherLunbotuList: [], //用来存放轮播图信息
            goodsinfo:{},//获取到的商品的信息
            ballFlag: false, //控制小球显示和隐藏的标识符
            selectCount: 1 //保存用户选中的商品数量。默认最少要买一件产品
        }
    },
    created(){
        this.getLunbotu();
        this.getGoodsInfo();
        console.log(this.fatherLunbotuList);
    },
    methods:{
        getLunbotu(){//获取商品的数据
            // this.$http.get('').then(res=>{
            // })
            /** 
             * 我们没有api，只能模拟
             * 1. 我们先要拿到商品数据的id值，在这里是一个伪id，即是一个index值
             * 2. 根据我们获得的index值到  商品数组 this.$store.state.dataInGoodsListVue  中去匹配商品，得到这个商品的信息，是一个对象
             * 3. 再把这个商品的信息渲染到页面上去
            */
            var index = this.$route.params.index;
            console.log(index);
            // 路由的index值减去1才是商品在商品列表中的index值
            var goodItem = this.$store.state.dataInGoodsListVue[index-1];
            console.log(goodItem);
            for(var i =0;i<3;i++){
                this.fatherLunbotuList.push({img:goodItem.src});
            }    
        },
        getGoodsInfo(){//获取商品的信息
            // this.$http.get('').then(res=>{

            // })
            /** 
             * 我们也是使用index的取值方法来获取商品的详细信息，再把这个信息渲染到页面上去
            */
            var index = this.$route.params.index; //路由的index值，对应商品在商品列表dataInGoodsListVue的index值要减去1
            var goodItem = this.$store.state.dataInGoodsListVue[index-1]; //是一个对象
            this.goodsinfo = goodItem;
        },
        goDesc(index){
            //点击使用编程式导航跳转到商品介绍页面
            this.$router.push({
                name:'goodsdesc',
                params:{
                    index:index,
                }
            })
        },
        goComment(index){
            // 点击使用编程式导航跳转到商品评论页面
            this.$router.push({
                name:'goodscomment',
                params:{
                    index:index,
                }
            })
        },
        addToShopCar(){
            this.ballFlag = !this.ballFlag;
            // {id:商品的id, count: 要购买的数量, price:商品的单价, selected:true}
            // 拼接出一个要保存到 store 中 car 数组中的商品对象

            // 底下的this.index 是路由的index值，对应的商品的index值要减去1；
            // 我们有了index值就可以找出这个index值商品现在的售价
            var sellPrice = this.$store.state.dataInGoodsListVue[this.index-1].newPrice;
            var goodsinfo = {id: this.index, count: this.selectCount, price: sellPrice, selected:true} 
            // 利用 commit 函数执行 store 中的 mutations 函数 提交商品信息
            this.$store.commit('addToCar',goodsinfo);
        },
        beforeEnter(el){
            el.style.transform = "translate(0, 0)";
        },
        enter(el,done){
            el.offsetWidth; //加上这个语句才会有动画
            // 但是我们发现，这个动画效果咋不同的页面布局，不同的分辨率的情况下会出现严重误差
            // 原因是我们把小球最终位移到的位置固定在了某一个分辨率下的某一个地点
            // 只要分辨率和测试的时候不一样，或者小球与到达地点不一样，问题就出现了
            // 因此我们不能把小球要到的横纵坐标写死了，而是根据不同的情况，来动态的计算这个坐标值
            // 经过分析。我们先要得到徽标的横纵坐标，再得到小球的横纵坐标，然后求出差值就是小球横纵坐标
            // 如何获取徽标和小球的位置 domObject.getBoundingClientRect()

            // 获取小球在页面中的位置(为小球设置一个ref属性，通过$ref来获取这个元素)
            const ballPosition = this.$refs.ball.getBoundingClientRect();
            // 获取徽标在页面中的位置
            const badgePosition = document.getElementById('badge').getBoundingClientRect();

            const xDist = badgePosition.left - ballPosition.left;
            const yDist = badgePosition.top - ballPosition.top;
            // console.log(xDist+"-----"+yDist);

            el.style.transform = `translate(${xDist}px,${yDist}px)`;
            el.style.transition = "all 0.5s cubic-bezier(0,0,.3,.67)";
            done();
        },
        afterEnter(el){
            this.ballFlag = !this.ballFlag;
        },
        getSelectCount(count){
            // 当子组件把选中的数量传递给父组件的时候，把选中的值保存到 data 上
            this.selectCount = count;
            console.log("父组件拿到的数量值为："+this.selectCount);
        }
    },
    components:{
        swiper:swiper, //2 注册我们的轮播图组件
        numbox:numbox  //2 注册我们的计算盒子组件
    }
}
</script>


<style lang="scss" scoped>
.goodsinfo-container {
    background-color: #cccfff;
    overflow: hidden;

    .now_price{
        color: red;
        font-size: 16px;
    }
    .mui-card-footer{
        display: block;
        button{
            margin-bottom: 10px;
        }
    }

    .ball{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color:red;
        position: absolute;
        z-index: 99;
        top:390px;
        left: 148px;
    }
}

</style>
